<template>
	<view class="content" @scroll="onPageScroll">
		<!-- 自定义头部导航栏 -->
		<navBar :opacity="opacity"></navBar>
		<view class="main f-bg">
			<!-- 列表 -->
			<view class="listNav">
				<view class="listNav01" @tap="inAboutUs">
					<view class="icon iconfont icon-guanyuwomen- navIcon"></view>
					<view class="navText">关于我们</view>
				</view>
				<view class="listNav01">
					<view class="icon iconfont icon-ershoushichang"></view>
					<view class="navText">二手市场</view>
				</view>
				<view class="listNav01">
					<view class="icon iconfont icon-duihuanshangcheng"></view>
					<view class="navText">兑换商城</view>
				</view>
				<view class="listNav01">
					<view class="icon iconfont icon-a-zu1701"></view>
					<view class="navText">骑手招募</view>
				</view>
			</view>
			<!-- 广播 -->
			<view class="broadcast">
				<view class="broadcast-main">
					<view class="icon iconfont icon-laba"></view>
					<view class="broadcast-text">
						<swiper :autoplay="true" style="height: 100%;" :interval="2000" circular vertical="true">
							<swiper-item v-for="(item, index) in noticeArr" :key="index">
								<view class="item">{{ item.title }}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 分类选项 -->
			<view class="classification">
				<view class="paper sort" v-for="(item,index) in classificationList" :key="item.id" @tap="clickorder(item.id)">
					<image :src="item.pic_url" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 回收指南 -->
			<view class="guide">
				<view class="guide_title">
					<text class="title">回收指南</text>
					<text class="hotline">客服热线：{{phon}}</text>
				</view>
				<view class="flowpath">
					<view class="reservation">
						<view class="icon iconfont icon-zaixianyuyue tubiao"></view>
						<text class="reservation-text">在线预约</text>
					</view>
					<view class="icon iconfont icon-yousanjiao-copy"></view>
					<view class="reservation">
						<view class="icon iconfont icon-shangmenfuwu tubiao"></view>
						<text class="reservation-text">免费上门</text>
					</view>
					<view class="icon iconfont icon-yousanjiao"></view>
					<view class="reservation">
						<view class="icon iconfont icon-wanchengdingdan tubiao"></view>
						<text class="reservation-text">完成订单</text>
					</view>
					<view class="icon iconfont icon-yousanjiao"></view>
					<view class="reservation">
						<view class="icon iconfont icon-yihuoqushouyi tubiao"></view>
						<text class="reservation-text">获取收益</text>
					</view>
				</view>
				<view class="recoveryButton" @tap="clickorder(0)">立即预约</view>
			</view>
			<!-- 承诺 -->
			<view class="commitment">
				<view class="commitment-title">我们承诺</view>
				<view class="commitment-main">
					<view class="commitment-box">
						<view class="icon iconfont icon-jishi"></view>
						<view class="box-text">及时上门</view>
						<view class="box-text-fu">24小时内完成</view>
					</view>
					<view class="commitment-box">
						<view class="icon iconfont icon-jiagetouming"></view>
						<view class="box-text">价格透明</view>
						<view class="box-text-fu">线上价格透明</view>
					</view>
					<view class="commitment-box">
						<view class="icon iconfont icon-jindutiaoshouyidaozhang"></view>
						<view class="box-text">即时到账</view>
						<view class="box-text-fu">收益瞬时结算</view>
					</view>
				</view>
			</view>
		</view>
		<tabBar currentPage="index"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/component/commen/tabbar.vue" //引入底部组件
	import navBar from "@/component/commen/navBar.vue" //引入头部组件
	import util from '@/component/commen/api/util.js';
	export default {
		components: {
			tabBar,
			navBar
		},
		data() {
			return {
				dataArray: ['Item 1', 'Item 2', 'Item 3'], // 示例数组数据
				scrollTop: 0, //屏幕滚动高度
				opacity: 0, //
				noticeArr: [], //公告列表
				phon: "", //手机号
				orderPath: "orderNow", //立即回收页面路径
				classificationList:[],//分类选项列表
			}
		},
		onLoad() {

		},
		mounted() {
			this.getNotice()
			// this.getUserPosition()
		},
		methods: {
			onPageScroll(e) {
				// console.log(e)
				this.scrollTop = e.scrollTop
				if (this.scrollTop <= 105) {
					this.opacity = this.scrollTop / 105 * 1
				} else {
					this.opacity = 1
				}
				// console.log(this.opacity)
			},
			getNotice() {
				var paramNotice = {
					do:"notice",
				}
				var paramCustomer = {
					do:"system"
				}
				util.requestWithSign(paramNotice).then(res=>{//获取公告信息
					this.noticeArr = res.data
				})
				util.requestWithSign(paramCustomer).then(res=>{//获取客服号码
					this.phon = res.data.report_phone
					uni.setStorage({
						key: "phon",
						data: this.phon
					})
				})
				// 获取分类
				var paramSort = {
					do: "reserve",
					op: "cateList",
					partnerid: 0
				}
				util.requestWithSign(paramSort).then(res=>{//获取客服号码
					this.classificationList = res.data
				})
			},
			getUserPosition() { //获取用户位置授权
				if(uni.getStorageSync("locate")){
					return;
				}
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						// console.log(res)
						const latitude = res.latitude;
						const longitude = res.longitude;
						// 处理获取到的定位信息
						uni.setStorageSync("locate",res)
					},
					fail: (err) => {
						// 处理获取定位失败的情况
					}
				})
			},
			clickorder(id) { //点击立即预约按钮
				console.log(id)
				var param = {
					do: "reserve",
					op: "cateList",
					partnerid: id
				}
				util.requestWithSign(param).then(res=>{//获取客服号码
					if(id==33){
						return this.navigateTo({
							url:`/otherPages/duties/duties?classList=${encodeURIComponent(JSON.stringify(res.data))}&classId=${id}`,
							animationType:"fade-in",
							animationDuration:0
						})
						// return console.log("家政服务")
					}
					this.navigateTo({
						url: `/pages/orderNow/orderNow?classList=${encodeURIComponent(JSON.stringify(res.data))}&classId=${id}`,
						animationType: "fade-in",
						animationDuration: 0
					})
				})
			},
			inAboutUs(){//点击关于我们
				uni.navigateTo({
					url:"/otherPages/aboutUs/aboutUs"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		// padding: 0 2vw;
		box-sizing: border-box;

		.main {
			margin: 0 20rpx;
			// height: 60vh;
			// background: #fff;
			// border: 1px solid #f00;
			position: relative;

			// title列表
			.listNav {
				// border: 1px solid #f00;
				// height: 150rpx;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 10rpx;
				width: 100%;
				position: absolute;
				top: -20rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;

				.listNav01 {
					text-align: center;

					// border: 1px solid #f00;
					.icon {
						// display: inline-block;
						font-size: 66rpx;
						// border: 1px solid #000;
					}

					.navText {
						font-size: 29rpx;
					}
				}
			}

			// 广播
			.broadcast {
				// height: 15vh;
				// margin-top: 14vh;
				padding-top: 145rpx;

				// border: 1px solid #000;
				.broadcast-main {
					display: flex;
					align-items: center;
					/* 垂直方向居中对齐 */
					background: #fff;
					// border: #f00 1px solid;
					// padding:10rpx;
					height: 60rpx;
					border-radius: 10rpx;

					.broadcast-text {
						font-size: 28rpx;
						width: 100%;
						height: 100%;
						margin-left: 16rpx;
						line-height: 60rpx;

						// border: 1px solid #f00;
						.item {
							// border:1px solid #f00;
							height: 90%;
							width: 97%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}

			// 分类选项
			.classification {
				// height: 26vh;
				// border: 1px solid #f00;
				margin-top: 20rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				.sort {
					// color: #fff;
					margin: 10rpx 0;
					width: 30%;
					// height: 10vh;
					// border: 1px solid #000;
					// border-radius: 5px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 208rpx;
						height: 120rpx;
					}
				}
			}

			// 回收指南
			.guide {
				background: #fff;
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding: 20rpx;

				.guide_title {
					display: flex;
					justify-content: space-between;

					.title {
						font-size: 29rpx;
						font-weight: bold;
					}

					.hotline {
						font-size: 29rpx;
						color: #0d0;
					}
				}

				.flowpath {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.reservation {
						text-align: center;

						.tubiao {
							// border:1px solid #f00;
							font-size: 60rpx;
						}

						.reservation-text {
							font-size: 28rpx;
						}
					}

					.icon-yousanjiao-copy,
					.icon-yousanjiao {
						transform: translateY(10%);
					}
				}

				.recoveryButton {
					background: #02bb8e;
					width: 85%;
					margin: 40rpx auto 0 auto;
					padding: 20rpx 0;
					box-sizing: border-box;
					border-radius: 40rpx;
					font-size: 32rpx;
					text-align: center;
					color: #fff;
					font-weight: bold;
				}
			}

			// 承诺
			.commitment {
				background: #fff;
				box-sizing: border-box;
				padding: 20rpx 20rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;

				.commitment-title {
					font-size: 29rpx;
					font-weight: bold;
				}

				.commitment-main {
					box-sizing: border-box;
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;

					.commitment-box {
						width: 31%;
						background: #f5f5f5;
						text-align: center;
						box-shadow: 0 0 10rpx #d8d8d8;
						border-radius: 6rpx;
						padding: 20rpx 0;

						.icon {
							// border: 1px solid #000;
							font-size: 66rpx;
						}

						.box-text {
							font-size: 29rpx;
							font-weight: bold;
						}

						.box-text-fu {
							font-size: 27rpx;
							color: #b4b4b4;
						}
					}
				}
			}
		}
	}
</style>